<template>
  <div
    class="sevenCard_item flex-left-right"
    :style="itemIndex === 0 ? 'marginTop: 0' : ''"
    style="justify-content: space-around"
  >
    <div class="card_time">
      <p>{{ forecast.weekdays[itemIndex] }}</p>
      <span>{{ initDate }}</span>
    </div>
    <i
      class="temperature_icon"
      :class="'qi-' + cardItemData.iconDay + '-fill'"
      :style="colorStyle"
    ></i>
    <div class="maxOrMin flex-top">
      <span>{{ cardItemData.tempMax }}</span>
      <div class="tmp-line">
        <div class="line"></div>
      </div>
      <span>{{ cardItemData.tempMin }}</span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "SevenCard",
  data() {
    return {
      is_temperature: 30,
    };
  },
  computed: {
    ...mapState(["forecast", "is_show"]),
    initDate() {
      let d = new Date(this.cardItemData.fxDate),
        yue = d.getMonth() + 1,
        ri = d.getDate() >= 10 ? d.getDate() : "0" + d.getDate();
      return yue + "月" + ri + "日";
    },
    colorStyle() {
      return this.cardItemData.tempMax >= this.is_temperature
        ? "color: rgba(220, 53, 69, 1)"
        : "color: rgba(40, 167, 69, 1)";
    },
  },
  props: {
    cardItemData: Object,
    itemIndex: Number,
  },
};
</script>

<style scoped>
.sevenCard_item {
  width: 100%;
  height: auto;
  padding: 0.06rem 0;
  margin-top: 0.1rem;
}
.sevenCard_item .card_time {
  font-size: 0.18rem;
}
.sevenCard_item .card_time span {
  font-size: 0.14rem;
  color: #777;
}
.sevenCard_item .temperature_icon {
  font-size: 0.3rem;
}
.tmp-line {
  width: 0.8rem;
  margin: 0 0.15rem;
}
.maxOrMin span {
  font-size: 0.21rem;
  position: relative;
}
.maxOrMin span::after {
  content: "°";
  position: absolute;
  top: 0;
  font-size: 0.18rem;
}
.line {
  height: 0.05rem;
  border-radius: 0.05rem;
  background-image: -webkit-linear-gradient(to right, #f18360, #427bff);
  background-image: -o-linear-gradient(to right, #f18360, #427bff);
  background-image: -moz-linear-gradient(to right, #f18360, #427bff);
  background-image: linear-gradient(to right, #f18360, #427bff);
}
</style>